<template>
  <div id="staModulehomeDiv">
    <Breadcrumb content="模块标准库" />
    <div class="bodyContent">
      <el-tabs type="border-card" v-model="activeName" @tab-click="tabHandleClick">
        <el-tab-pane label="首页" name="homePane">
          <el-scrollbar style="height: 100%">
            <div class="flex flex-wrap padding-sm">
              <el-card class="margin-lr-sm margin-tb-sm cursor  light" style="text-align: center;" @click="cardChange('menuPane')">
                <img :src="`${getAssetsFile('images/interfacePlatform/cjsz.png')}`" alt class="homeimg" />
                <div class="text item" style="width:150px">功能字典</div>
              </el-card>
              <el-card class="margin-lr-sm margin-tb-sm cursor" style="text-align: center;" @click="cardChange('modulePane')">
                <img :src="`${getAssetsFile('images/interfacePlatform/yzcj.png')}`" alt class="homeimg" />
                <div class="text item" style="width:150px">模块字典</div>
              </el-card>
              <el-card class="margin-lr-sm margin-tb-sm cursor  light" style="text-align: center;" @click="cardChange('modelPane')">
                <img :src="`${getAssetsFile('images/interfacePlatform/jksz.png')}`" alt class="homeimg" />
                <div class="text item" style="width:150px">标准化模块</div>
              </el-card>
              <el-card class="margin-lr-sm margin-tb-sm cursor  light" style="text-align: center;" @click="cardChange('rolePane')">
                <img :src="`${getAssetsFile('images/interfacePlatform/cjsz.png')}`" alt class="homeimg" />
                <div class="text item" style="width:150px">标准化角色</div>
              </el-card>
            </div>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="功能字典" name="menuPane">
          <StaMenuSet ref="staMenuRef" />
        </el-tab-pane>
        <el-tab-pane label="模块字典" name="modulePane">
          <StaModuleSet ref="staModuleRef" />
        </el-tab-pane>
        <el-tab-pane label="标准化模块" name="modelPane">
          <StaModelSet ref="staModelRef" />
        </el-tab-pane>
        <el-tab-pane label="标准化角色" name="rolePane">
          <StaRoleSet ref="staRoleRef" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
let { proxy }: any = getCurrentInstance();
import { AppStore } from '@/stores/store'; //'../../../stores/store';
import Breadcrumb from '@/components/Breadcrumb.vue'; //面包屑
import { notifyType, notifyMessage, getAssetsFile } from '@/utils/common';
import StaModuleSet from './StaModuleSet.vue';
import StaMenuSet from './StaMenuSet.vue';
import StaModelSet from './StaModelSet.vue';
import StaRoleSet from './StaRoleSet.vue';

let store = AppStore();
let staModuleRef: any = ref(null);
let staMenuRef: any = ref(null);
let staModelRef: any = ref(null);
let staRoleRef: any = ref(null);
let activeName = ref('homePane');

function tabHandleClick(tab: any) {
  if (tab.props.name == 'modulePane') {
    staModuleRef.value.initPage();
  } else if (tab.props.name == 'menuPane') {
    staMenuRef.value.initPage();
  } else if (tab.props.name == 'modelPane') {
    staModelRef.value.initPage();
  } else if (tab.props.name == 'rolePane') {
    staRoleRef.value.initPage();
  }
}

function cardChange(tabPane: any) {
  activeName.value = tabPane;
  if (activeName.value == 'modulePane') {
    staModuleRef.value.initPage();
  } else if (activeName.value == 'menuPane') {
    staMenuRef.value.initPage();
  } else if (activeName.value == 'modelPane') {
    staModelRef.value.initPage();
  } else if (activeName.value == 'rolePane') {
    staRoleRef.value.initPage();
  }
}
</script>

<style lang="scss" scoped>
#staModulehomeDiv {
  width: 100%;
  height: 100%;

  .bodyContent {
    height: calc(100% - 60px);

    .contentDiv {
      height: 100%;
      background-color: $base-white;

      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 5px 5px 0;
      }

      .vxe-form {
        :deep(.vxe-form--item) {
          margin-right: 10px;
        }
      }

      .tableBox {
        height: calc(100% - 40px);
      }
    }
  }
  .leftTable {
    height: calc(100% - 30px);
  }
  :deep(.el-tabs) {
    height: 100%;
  }
  :deep(.el-tabs__content) {
    padding: 0;
    height: calc(100% - 40px);
    .el-tab-pane {
      height: 100%;
      .homeimg {
        width: 70px;
        height: 70px;
      }
    }
  }
}
</style>